<template>
  <!-- 退案记录查询 -->
  <section class="page case-record-query">
    <data-form :model="searchModel" @onSearch="refreshData" :page="pageService" @handleResetForm="follFeedback">
      <template slot="inputs">
        <el-form-item label="账户号" prop="caseNumber">
          <el-input v-model="searchModel.caseNumber"></el-input>
        </el-form-item>
        <el-form-item label="客户号" prop="personalId">
          <el-input v-model.trim="searchModel.personalId"></el-input>
        </el-form-item>
        <el-form-item label="客户姓名" prop="principalId">
          <el-select v-model="searchModel.principalId" placeholder="请选择" clearable>
            <el-option v-for="{index,name,id} in principalList.content" :key="index" :label="name" :value="id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证件号" prop="personalName">
          <el-input v-model.trim="searchModel.personalName"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="partnerName">
          <el-input v-model.trim="searchModel.partnerName"></el-input>
        </el-form-item>
        <el-form-item label="申请人" prop="partnerName">
          <el-input v-model.trim="searchModel.partnerName"></el-input>
        </el-form-item>
        <el-form-item label="申请时间" prop="createTime">
          <el-date-picker type="daterange" :editable="false" v-model="searchModel.createTime" placeholder="选择日期时间" clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="机构号" prop="agentName">
          <el-input v-model="searchModel.agentName"></el-input>
        </el-form-item>
      </template>
    </data-form>

    <data-box :data="dataSet" @onPageChange="refreshData" :page="pageService">
      <template slot="columns">
        <!--数据列区域-->
        <el-table-column prop="caseNumber" label="账户号" :min-width="$helper.getColumnWidth(6)">
          <template slot-scope="scope">
            <el-button type="text" @click="openExecutionPage(scope.row)">{{scope.row.caseNumber}}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="batchNumber" label="客户姓名" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip></el-table-column>
        <el-table-column prop="principalName" label="手机号" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip></el-table-column>
        <el-table-column prop="personalName" label="证件号" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="idCard" label="申请人" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="mobileNo" label="申请原因" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="createTime" label="申请时间" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="lockEndDate" label="机构号"  :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip></el-table-column>
        <el-table-column prop="messageStatus" label="操作" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
          <template slot-scope='scope'>
            <span @click="showRecored(scope.row)">查看审批记录</span>
          </template>
        </el-table-column>
      </template>
    </data-box>
    <!-- 查看审批记录 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
      <data-box :data="dataSet" @onPageChange="refreshData">
        <template slot="columns">
          <!--数据列区域-->
          <el-table-column prop="caseNumber" label="审批人姓名" :min-width="$helper.getColumnWidth(6)">
            <template slot-scope="scope">
              <el-button type="text" @click="openExecutionPage(scope.row)">{{scope.row.caseNumber}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="batchNumber" label="审批状态" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip></el-table-column>
          <el-table-column prop="principalName" label="审批时间" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip></el-table-column>
          <el-table-column prop="personalName" label="审批结果" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
          </el-table-column>
        </template>
      </data-box>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue"
import Component from "vue-class-component"
import { Auth, Layout, Dependencies } from "~/core/decorator"
import { PageService } from "~/utils/page.service"
import DataForm from "~/components/common/data-form.vue"
import DataBox from "~/components/common/data-box.vue"
import { SortService } from "~/utils/sort.service"
import NumberRange from "~/components/common/number-range.vue"
import { SynthesizeQueryService } from "~/services/domain-service/synthesize-query.service"
import { namespace, Getter, Mutation,State } from "vuex-class"
import { MENU_CHANNEL } from "../../config/enum.config"

@Layout("workspace")
@Component({
  components: {
    NumberRange
  }
})
export default class MessageSendRecordQuery extends Vue {
  @Dependencies(PageService) private pageService: PageService
  @Dependencies(SortService) private sortService: SortService
  @Dependencies(SynthesizeQueryService) private synthesizeQueryService: SynthesizeQueryService
  @State private principalList: any
  private searchModel: any = {
    createTime: { max: "", min: "" },
    caseNumber: "",
    personalName: "",
    idCard: "",
    mobileNo: "",
    applyRealName: "",
  }
  private dialogVisible: boolean = false
  private dataSet: any[] = []

  private mounted() {
    this.refreshData()
  }

  private follFeedback() {
    this.searchModel.createTime = { min: "", max: "" }
  }

  private paramsHandler() {
    const params = { ...this.searchModel }
    params.createTimeMax = this.$filter.dateRanageFormat(
      this.searchModel.createTime
    ).end;
    params.createTimeMin = this.$filter.dateRanageFormat(
      this.searchModel.createTime
    ).start;
    delete params.createTime;
    return params;
  }

  private refreshData() {
    this.synthesizeQueryService
      .queryMessageSendRecord(this.paramsHandler(), this.pageService)
      .subscribe(data => (this.dataSet = data))
  }
  /**
   * 进入查看执行页
   */
  private openExecutionPage(row) {
    this.$router.openCaseDetail(row.caseId, {
      menuChannel: MENU_CHANNEL.Query_case_query,
      hiddenCaseList: true,
      hiddenAction: true
    })
  }

  private showRecored(row) {

  }

  private handleClose() {

  }
}
</script>
<style lang="less">
  .case-record-query{
    .el-dialog__footer{
      text-align: center !important;
    }
  }
</style>
